<template>
	<view class="set">
		<view class="message_top">
			<view class="message_top_title" :style="{top:computedTop}">编辑商家信息</view>
			<view class="message_top_back" :style="{top:computedTop}" @click="Back">
				<image src="../../static/search/back.png" class="bfbimages"></image>
			</view>
		</view>

		<view class="set_box">

			<view class="set_box_list">
				<view>店铺名称</view>
				<view>
					<input type="text" placeholder="请输入" style="font-weight: 500;font-size: 34rpx;color: #333333;"
						v-model="from.merchant_name" />
				</view>
			</view>

			<view class="set_box_list" @click="DPtype">
				<view>店铺类型</view>
				<view style="justify-content: space-between;">
					<input type="text" placeholder="请选择" style="font-weight: 500;font-size: 34rpx;color: #333333;"
						:disabled="true" v-model="merchant_cate_name" />
					<view class="flex" style="width: 18rpx;height: 10rpx;text-align: center;line-height: 10rpx;">
						<image src="../../static/hei_xia.png" class="bfbimages"></image>
					</view>
				</view>
			</view>

			<view class="set_box_list" @click="DPmap">
				<view>店铺位置</view>
				<view style="justify-content: space-between;">
					<input type="text" placeholder="请选择" style="font-weight: 500;font-size: 34rpx;color: #333333;"
						:disabled="true" v-model="from.address" />
					<view class="flex" style="width: 18rpx;height: 10rpx;text-align: center;line-height: 10rpx;">
						<image src="../../static/hei_xia.png" class="bfbimages"></image>
					</view>
				</view>
			</view>

			<view class="set_box_list" @click="XXmap">
				<view>详细地址</view>
				<view>
					<input type="text" placeholder="请选择" style="font-weight: 500;font-size: 34rpx;color: #333333;width: 100%;"
						:disabled="true" v-model="from.address_detail" />
				</view>
			</view>

			<view class="set_box_map"  @click="XXmap">
				<text>地图选点</text>
				<view class="flex"
					style="width: 18rpx;height:18rpx;text-align: center;line-height: 18rpx;margin-left: 15rpx;">
					<image src="../../static/red_right.png" class="bfbimages"></image>
				</view>
			</view>

			<view class="set_box_up">
				<view>店铺头像</view>
				<view class="set_box_up_for">

					<view class="set_box_up_for_up" v-if="from.merchant_avatar==''" @click="ImagesUp(1)">
						<view class="flex">
							<image src="../../static/xj.png" class="bfbimages"></image>
						</view>
						<view>上传</view>
					</view>

					<view class="set_box_up_for_src" v-else @click="ImagesUp(1)">
						<image :src="from.merchant_avatar" class="bfbimages"></image>
					</view>
				</view>
			</view>

			<view class="set_box_up">
				<view>店铺图片</view>
				<view class="set_box_up_for">

					<view class="set_box_up_for_src" v-for="(item,index) in from.merchant_banner" :key="index">
						<image :src="item" class="bfbimages"></image>
						<view class="set_box_up_for_src_out flex" @click="Outmerchant_banner(index)">
							<image src="../../static/imagesout.png" class="bfbimages"></image>
						</view>
					</view>

					<view class="set_box_up_for_up" @click="ImagesUp(2)" v-if="from.merchant_banner.length<3">
						<view class="flex">
							<image src="../../static/xj.png" class="bfbimages"></image>
						</view>
						<view>上传</view>
					</view>

				</view>
			</view>

			<view class="set_box_up">
				<view>证件上传</view>
				<view class="set_box_up_for">

					<view class="set_box_up_for_src" v-for="(item,index) in from.merchant_paper" :key="index">
						<image :src="item" class="bfbimages"></image>
						<view class="set_box_up_for_src_out flex" @click="Outmerchant_paper(index)">
							<image src="../../static/imagesout.png" class="bfbimages"></image>
						</view>
					</view>

					<view class="set_box_up_for_up" @click="ImagesUp(3)" v-if="from.merchant_paper.length<3">
						<view class="flex">
							<image src="../../static/xj.png" class="bfbimages"></image>
						</view>
						<view>上传</view>
					</view>

				</view>
			</view>

			<view class="set_box_textinp">
				<view>店铺简介</view>
				<view>
					<u--textarea v-model="from.desc" placeholder="请输入" :height='135' border="none"></u--textarea>
				</view>
			</view>

		</view>

		<view class="set_btn" @click="OK">确定</view>

		<u-picker :show="show" :columns="columns" @cancel='show=false' @confirm='confirm'></u-picker>
		<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
			@confirm="confirmMap" @cancel="cancel" :visible="visible" />
	</view>
</template>

<script>
	import cityPicker from '../../uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker.vue'
	export default {
		data() {
			return {
				menuButtonInfo: null,
				from: {
					merchant_name: '',
					merchant_cate_id: '',
					address: '',
					address_detail: '',
					longitude: '',
					latitude: '',
					merchant_avatar: '',
					merchant_banner: [],
					merchant_paper: [],
					desc: ''
				},
				show: false,
				columns: [
					[]
				],
				sh_type: '',
				merchant_cate_name: '',
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '',
				column: 3,
			}
		},
		components: {
			cityPicker
		},
		computed: {
			computedTop() {
				if (this.menuButtonInfo) {
					return `${this.menuButtonInfo.height * 2 - 6}px`;
				}
				return '0px';
			},
		},
		onLoad() {
			const info = uni.getMenuButtonBoundingClientRect();
			this.menuButtonInfo = info;
		},
		methods: {
			OK() {
				if (uni.getStorageSync('is_merchant') == '0') { //0不是商家   1是商家
				} else {}

				this.$request('/api/merchant/applyMerchant', this.from).then((res) => {
					console.log(res, '提交');
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1500
						});
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
						return false
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						return false
					}
				})
			},
			Outmerchant_banner(index) {
				this.from.merchant_banner.splice(index, 1);
			},
			Outmerchant_paper(index) {
				this.from.merchant_paper.splice(index, 1);
			},
			ImagesUp(type) {
				// 1 头像
				// 2店铺图片
				// 3证件上传

				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.$uts + '/api/common/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								token: uni.getStorageSync('token'),
								type: 2
							},
							header: {
								'token': uni.getStorageSync('token'),
								'server': 1,
							},
							success: (res) => {
								let Ima = JSON.parse(res.data)
								console.log(Ima.data.url, 'Ima-Ima-Ima');

								if (type == 1) {
									this.from.merchant_avatar = Ima.data.url
								} else if (type == 2) {
									this.from.merchant_banner.push(Ima.data.url)
								} else {
									this.from.merchant_paper.push(Ima.data.url)
								}

							}
						});
					}
				});
			},
			confirmMap(val) {
				console.log(val)
				this.from.address = val.name
				this.visible = false
			},
			cancel() {
				this.visible = false
			},
			XXmap() {
				uni.chooseLocation({
					success: res => {
						const latitude = res.latitude
						const longitude = res.longitude

						console.log(res, '点击得');
						this.from.address_detail = res.name
						this.from.longitude = res.latitude
						this.from.latitude = res.longitude
					},
					fail: err => {
						console.log(err, 'err-err-err');
						wx.showToast({
							title: '授权失败',
							icon: 'none',
							duration: 1000
						})
					}
				})
			},
			DPmap() {
				this.visible = true
			},
			DPtype() {
				this.$request('/api/merchant/merchantCate').then((res) => {
					console.log(res.data, '商户分类');
					this.sh_type = res.data
					for (var i = 0; i < res.data.length; i++) {
						this.columns[0].push(res.data[i].name)
						this.show = true
					}
				})
			},
			confirm(e) {
				console.log(e.value[0], '选择的类型');
				this.merchant_cate_name = e.value[0]
				for (var i = 0; i < this.sh_type.length; i++) {
					if (this.sh_type[i].name == e.value[0]) {
						this.from.merchant_cate_id = this.sh_type[i].id
						this.show = false
					}
				}
			},
			Back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.set {
		width: 100vw;
		min-height: 100vh;
		float: left;
		background-color: #F6F8FB;
		padding-bottom: 25rpx;

		.message_top {
			width: 100%;
			height: 200rpx;
			position: relative;

			.message_top_title {
				width: 100%;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				position: absolute;
				left: 0;
				z-index: 2;
			}

			.message_top_back {
				width: 44rpx;
				height: 44rpx;
				position: absolute;
				left: 30rpx;
				z-index: 9;
			}
		}

		.set_box {
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 0 auto 0;
			padding-top: 25rpx;
			padding-bottom: 25rpx;

			.set_box_list {
				width: 650rpx;
				margin: 0 auto;
				margin-bottom: 40rpx;
			}

			.set_box_list>view:nth-child(1) {
				width: 100%;
				height: auto;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

			.set_box_list>view:nth-child(2) {
				width: 100%;
				height: 80rpx;
				border-bottom: 2rpx solid #E7E7E7;
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 34rpx;
				color: #999999;
			}

			.set_box_map {
				width: 100%;
				height: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FE4825;
			}

			.set_box_up {
				width: 650rpx;
				margin: 40rpx auto 0;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

			.set_box_up>view:nth-child(1) {
				width: 100%;
			}

			.set_box_up_for {
				width: 100%;
				height: 180rpx;
				margin: 20rpx auto 0;
				display: flex;
				align-items: center;

				.set_box_up_for_up {
					width: 180rpx;
					height: 140rpx;
					overflow: hidden;
					padding-top: 40rpx;
					background-color: #F2F2F2;
				}

				.set_box_up_for_up>view:nth-child(1) {
					width: 48rpx;
					height: 48rpx;
					text-align: center;
					line-height: 48rpx;
					margin: 0 auto;
				}

				.set_box_up_for_up>view:nth-child(2) {
					width: 100%;
					height: auto;
					text-align: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					margin-top: 20rpx;
				}

				.set_box_up_for_src {
					width: 180rpx;
					height: 180rpx;
					margin-right: 20rpx;
					position: relative;

					.set_box_up_for_src_out {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						right: -20rpx;
						top: -20rpx;
						z-index: 9;
					}
				}
			}

			.set_box_textinp {
				width: 650rpx;
				margin: 40rpx auto 0;
			}

			.set_box_textinp>view:nth-child(1) {
				width: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

			.set_box_textinp>view:nth-child(2) {
				width: 100%;
				height: 270rpx;
				margin: 10rpx auto 0;
			}
		}

		.set_btn {
			width: 710rpx;
			height: 100rpx;
			background: linear-gradient(270deg, #FE4624 0%, #FF8143 100%);
			border-radius: 50rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 100rpx;
			margin: 20rpx auto 0;
		}
	}
</style>